Week 1 - Module 1 - Introduction and Outline

Overview

Introductions

Class Topics

Basics

Outline

What is Internet Mapping

Extended Desktop Mapping

Use of open standards based remote data and map services in desktop applications

Geospatial Data Sharing

Establishing open standards based services to share geospatial data and mapping capabilities over the Internet

Web-client Mapping

The delivery of mapping and geospatial data tools through web browsers, again based upon open standards

Definitions

Internet

The global computer network of computers that typically connect with each other over TCP/IP

World Wide Web

The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components

Mapping

The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)

Definitions

Analysis

The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data

Open Standards

While the definition varies from one organization to the next, Open Standards are often characterized by the following:

Definitions

Interoperability

Ability of systems to share data and information with each other

COTS

Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support

Open Source

Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute

Definitions

Data

Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.

Metadata

Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services

Tools

Computer Hardware Requirements

Software Requirements

Week 2 - Module 2a - Web-based Mapping Clients. HTML, CSS & Javascript

Overview

Web Development

Parts of a Web Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
    <!-- The HTML block is the container for all of your page content -->
    <head>
        <!-- The head is where you include pointers to external resources 
        (i.e. style sheets and javascript files), blocks of Javascript code
        , styles, etc.  -->
        <title>The page title also goes in here</title>
    </head>
    <body>
        <!-- The body is where you put all of the content for the page 
        (i.e. the material that will be displayed in the web browser)  -->
        <h1>Headers</h1>
        <div>Generic blocks of content</div>
        <p>Paragraphs</p>
        <table>Tables</table>
        <img ...>Images</img>
        <form ...>Forms</form>
        <ul>Unordered Lists</ul>
        <ol>Ordered Lists</ol>
        <li>List Items</li>
        
        <!-- Javascript can go here as well -->
    </body>
</html>

Link to example/Preview

Web Site Components - Structure

Content is defined in terms of the structural elements available in HTML/XHTML

Web Site Components - Presentation

Modifications to default rendering of HTML/XHTML elements are made through styles defined in CSS

CSS Selectors

Selectors may be based on several criteria

Web Site Components - Behavior

The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems

Simple Web Page

1
2
3
4
5
6
7
8
9
10
11

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page</title>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
    </body>
</html>

link to example/Preview

Simple Web Page with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page - with styling</title>
        <style type="text/css">
            h1 {color:blue; font-size:large}
            p.para {color:#777777; font-size:small}
            #annoying {color:red; text-decoration:line-through}
        </style>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p class="para">OK, not much simpler than this.</p>
        <p id="annoying" class="para">Hello World?</p>
    </body>
</html>

link to example/Preview

Simple Web Page with Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page with Javascript</title>
        <script type="text/javascript">
            function genericAlert() {
                alert("You just did something ...")
                document.getElementById("clickMe").style.color = "red"
            }
        </script>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
        <p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
    </body>
</html>

link to example/Preview

More Complete Web Page Example

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

Week 3- Module 2a - Web-based Mapping Clients. Google Maps API

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family
http://code.google.com/apis/maps/
Javascript API Home Page
http://code.google.com/apis/maps/documentation/javascript/
Javascript API v3 Tutorial Page
http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Types (required)
ROADMAP
SATELLITE
HYBRID
TERRAIN
Latitude and Longitude (required)
specification of where the map should initially be centered
Zoom Level (required)
0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker
points depicted by specified or defined icons at locations within the map
Polyline
linear features defined by multiple points with a defined style for the line
Polygon
closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified.
(Ground) Overlay Maps
Image-based map layers that replace or overlay Google layers - registered to the map coordinates

Overlays (continued)

Info Windows
floating content windows for displaying content defined as HTML, a DOM element, or text string
Layers
Grouped display content assigned to a specific layer type: Data (including GeoJSON), KmlLayer (& GeoRSS), Heatmap, FusionTablesLayer, TrafficLayer, TransitLayer BicyclingLayer
Custom Overlays
definition of programmatically controlled layers

Services

Services

Events

Examples

Simple - Roadmap

gmaps01.html preview 

Simple - Roadmap Code

gmaps01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_01.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* You must set the height of either the 'html' or 'body' elements for some 
    browsers to properly render the map with a hight taller than 0px */
html { 
    height: 100% }

body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
    color: #CCCCCC;
    text-align: center}
    
#map_canvas { 
    width:90%; 
    height:80%; 
    margin-left:auto; 
    margin-right: auto }
    
.infoBox { 
    color:black }

mapPage_01.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Satellite

gmaps02.html preview 

Simple - Satellite Code

gmaps02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_02.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_02.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid

gmaps03.html preview 

Simple - Hybrid Code

gmaps03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_03.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_03.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Terrain

gmaps04.html preview 

Simple - Terrain Code

gmaps04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_04.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_04.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid - Zoomed

gmaps05.html preview 

Simple - Hybrid - Zoomed Code

gmaps05.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_05.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_05.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Zoomed - Modified Controls

gmaps06.html preview 

Simple - Zoomed - Modified Controls Code

gmaps06.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_06.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
    zoom: 18,
    center: classroom,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    zoomControl: true,
    zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
    mapTypeControl: true,
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    streetViewControl: false
};
var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
}

Markers

gmaps07.html preview 

Markers Code

gmaps07.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_07.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_07.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map);
}

Polyline

gmaps08.html preview 

Polyline Code

gmaps08.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_08.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_08.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 

    var officeVisitCoordinates = [
        office,
        new google.maps.LatLng(35.084445,-106.624327),
        new google.maps.LatLng(35.084309,-106.624308),
        classroom
        ];
    var officePath = new google.maps.Polyline({
        path: officeVisitCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    officePath.setMap(map)
}

Polygon

gmaps09.html preview 

Polygon Code

gmaps09.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_09.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_09.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    bldgPoly.setMap(map)
}

Adding an Info Window

gmaps10.html preview 

Adding an Info Window Code

gmaps10.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_10.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_10.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
        });
    bldgPoly.setMap(map);
    var classInfoContent = '<div class="infoBox">' +
        '<p>This is the location for the Geography 485L/585L class</p>' +
        '</div>'
    var classInfoWindow = new google.maps.InfoWindow({
        content: classInfoContent
        });
    google.maps.event.addListener(classroomMarker, 'click', function() {
        classInfoWindow.open(map,classroomMarker);
        });
}

Week 4 - Module 2a - Web-based Mapping Clients. Google Maps API (pt. 2)

Overview

Getting Started with Styled Maps - Video

Styled Maps Documentation | Styled Maps Wizard

Google Maps Styled Maps Wizard link

Google Maps Styled Maps Wizard link

Map Example: Simple - Styled

gmap_styled.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map - Styled (POIs Highlighted)</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_styled.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_styled.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var myOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
          {
            featureType: "water",
            stylers: [
              { visibility: "on" },
              { hue: "#0008ff" }
            ]
          },{
            featureType: "road.highway",
            stylers: [
              { hue: "#ff1a00" }
            ]
          },{
            featureType: "road.arterial",
            stylers: [
              { hue: "#ffa200" },
              { visibility: "simplified" }
            ]
          },{
            featureType: "road.local",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "administrative",
            stylers: [
              { visibility: "simplified" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" },
              { hue: "#00ffff" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" }
            ]
          }
        ]

        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
}

Google I/O 2011: Managing and visualizing your geospatial data with Fusion Tables - Video

Some particularly relevant sections: Introduction (0:00 - 10:30) | Google Maps API Integration (21:40 - 34:42) | Summary and Links (52:00 52:40)

Fusion Tables Documentation/Help

Google Fusion Tables Introduction Video link

Google Fusion Tables Introduction Video link

Bringing It All Together

gmaps_events.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/event_mapPage.css">
        <title>Karl's Event Diary</title>
    </head>

    <body>
        <h1>My diary of endurance events that I've participated in since joining Team in Training
        </h1>
        
        <p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's 
        (<a href="http://www.lls.org/">LLS</a>) Team in Training 
        (<a href="http://www.teamintraining.org/">TNT</a>, 
        <a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as 
        participants to train for the Animas Valley/Steamworks Half Marathon 
        and raise money for blood cancer research and patient services. In spite of 
        our not having any direct connection to blood cancer (at that time), 
        we found the goals of LLS admirable,  the combined training and fund-raising 
        program of TNT a great idea, and have made many new friends over the many 
        seasons that we've been involved with TNT.</p>
        
        <p>From 2008 through early 2015 we  continued to volunteer with TNT, as 
        participants, mentors, and since 2010 I was a coach (check out my 
        <a href="http://youtu.be/GMSKG8L6K78#t=2m13s">half-second</a> of fame in the 
        info video) for TNT with an emphasis on training walkers for full- or 
        half-marathons. This page provides a summary of the events that I've participated 
        in in some capacity since we became involved with TNT. </p>
        
        <div id="event-map" name="event-map"></div>

        <h2>
            <span class="date">11/13/2015</span> 
            Avengers Half Marathon 
            <span class="time">3:17:55</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>

        <h2>
            <span class="date">1/11/2015</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:21:01</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/10/2015</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">2:45:55</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">10/19/2014</span> 
            Duke City Half Marathon 
            <span class="time">2:45:17</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[0].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>
        <h2>
            <span class="date">2/23/2014</span> 
            Princess Half Marathon
            <span class="time">3:07:11</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">2/22/2014</span> 
            Princess Enchanted 10k
            <span class="time">1:42:43</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">9/1/2013</span> 
            Disneyland Half Marathon 
            <span class="time">2:56:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/13/2013</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:46:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/12/2013</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:22:48</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>
    
        <h2>
            <span class="date">9/29/2012</span> 
            Hot Chocolate 15k 
            <span class="time">1:56:46</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[6].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/9/2012</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/9/2012</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:56:28</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/8/2011</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:29:00</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/19/2010</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/6/2010</span> 
            San Diego Rock 'n' Roll Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[2].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/18/09</span> 
            Nike Women's Marathon 
            <span class="time">7:13:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[3].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">9/6/2009</span> 
            Disneyland Half Marathon 
            <span class="time">3:43:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/11/2009</span> 
            Disney World Marathon 
            <span class="time">6:57:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/19/2008</span> 
            Duke City Half Marathon 
            <span class="time">3:09:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[0].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/21/2008</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">3:14:52</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

    </body>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_events.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize function
             when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should 
            be for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

gmaps_events.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

var map;
var eventPlaces;

function initialize() {
    // Define a set of global coordinates for use throughout the web site
    // Place coordinates derived from GNIS database: http://geonames.usgs.gov/pls/gnispublic
    eventPlaces = [
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Albuquerque: Duke City Half Marathon"
        }, 
        {
            name: "Durango", 
            point: new google.maps.LatLng(37.2752800,-107.8800667),
            label: "Durango: Animas Valley/Steamworks Half Marathon"
        },
        {
            name: "San Diego", 
            point: new google.maps.LatLng(32.7153292,-117.1572551),
            label: "San Diego: San Diego Rock 'n' Roll Marathon"
        },
        {
            name: "San Francisco", 
            point: new google.maps.LatLng(37.7749295,-122.4194155),
            label: "San Francisco: Nike Women's Marathon"
        },
        {
            name: "Orlando", 
            point: new google.maps.LatLng(28.5383355,-81.3792365),
            label: "Orlando: Walt Disney World half- and full-marathon"
        },
        {
            name: "Anaheim", 
            point: new google.maps.LatLng(33.8352932,-117.9145036),
            label: "Anaheim: Disneyland Half Marathon"
        },
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Hot Chocolate 15k"
        } 

    ];

    var myOptions = {
        zoom: 4,
        center: eventPlaces[0].point,
        mapTypeId: google.maps.MapTypeId.ROADMAP};

    map = new google.maps.Map(
        document.getElementById("event-map"), 
        myOptions);

    addMarkers(map,eventPlaces)
}

function recenter(mapName, latlon, zoomLevel) {
    mapName.setCenter(latlon);
    mapName.setZoom(zoomLevel)
}

function addMarkers(mapName, markerArray) {
    for (index = 0; index < markerArray.length; index++) {
        myMarker = new google.maps.Marker({
            position: markerArray[index].point,
            title: markerArray[index].label
        });
        myMarker.setMap(mapName)
    }
}
Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.